
<template>
  <div>
    <el-cascader filterable clearable :value="citySelection"
                 :disabled="disabledBoole"
                 :options="options" @change="citySelectionChange"
                 :placeholder="placeholder" ref="citySelection" style="width: 100%"></el-cascader>
  </div>
</template>

<script>
import { treeByArea } from "@/api/cwgd/cwgdApi.js";

export default {
  model: {
    prop: "value",
    event: "dataChange",
  },
  props: {
    value: {
      type: Array,
      default() {
        return [];
      },
    },
    placeholder: {
      type: String,
      default: "请选择",
    },

    query: {
      default: 2,
    },

    disabledBoole:{
      type: Boolean,
      default: false
    }

    // 获取选中的节点	(leafOnly) 是否只是叶子节点(true)
  },

  data() {
    return {
      options: [],
      citySelection: [],
      cityObj: {},
      //   propSelect: {
      //     // checkStrictly: true,
      //     lazy: true, //	是否动态加载子节点，需与 lazyLoad 方法结合使用
      //     lazyLoad: this.handleGetClassOrStudent, //懒加载调用的方法
      //   },
    };
  },
  watch: {
    value: {
      handler(val) {
        this.citySelection = val;
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    this.treeByArea();
  },
  mounted() { },
  methods: {
    clearAllChildren(items, childrenName = "children") {
      for (let i = 0; i < items.length; i++) {
        const item = items[i];
        // 当前对象存在children
        if (item && item[childrenName]) {
          // children为空数组时删除
          if (item[childrenName].length === 0) {
            delete item[childrenName];
          } else {
            // 递归当前children数组
            this.clearAllChildren(item[childrenName], childrenName);
          }
        }
      }
      return items;
    },
    treeByArea() {
      treeByArea({ regionLevel: this.query }).then((res) => {
        if (res.code == "200") {

          this.options = this.clearAllChildren(res.data)

        }
      });
    },
    citySelectionChange(val) {
      if (val) {
        this.$nextTick(()=>{
          this.$emit("change", this.$refs.citySelection.getCheckedNodes(true));
        })
      } else {
        this.$emit("change", val);
      }
    },


  },
};
</script>

<style lang="scss" scoped></style>
